package com.catazy.base.presentation.compose.composable

import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.catazy.base.R

private val PLACEHOLDER_IMAGES = listOf(
    R.drawable.image_placeholder_1,
    R.drawable.image_placeholder_2,
    R.drawable.image_placeholder_3,
)

/**
 * 占位图
 */
@Composable
fun PlaceholderImage(
    url: Any?,
    contentDescription: String?,
    modifier: Modifier = Modifier,
) {
    Surface(
        modifier = modifier
    ) {
        // rememberSaveable： 该函数确保状态在配置更改（如屏幕旋转）后仍然可用。 适用于需要持久化状态的场景
        // mutableIntStateOf(initialValue: Int)： 创建一个可变的状态对象，初始值为传入的整数。 适合用于存储简单的整数值状态。
        // PLACEHOLDER_IMAGES.random() 从列表中随机选择一个元素
        val randomPlaceHolder by rememberSaveable {
            mutableIntStateOf(PLACEHOLDER_IMAGES.random())
        }

        // ImageRequest.Builder： 构建图片请求的构建器，用于加载图片。
        // crossfade(true)： 启用淡入淡出效果，当图片加载完成时，图片会平滑地淡入。
        val model = ImageRequest.Builder(LocalContext.current).data(url).crossfade(true).build()

        AsyncImage(
            // 数据模型
            model = model,
            // 图片描述，用于辅助技术（如屏幕阅读器）
            contentDescription = contentDescription,
            // fallbackImage： 在加载图片失败时显示的占位图。
            // fallbackImage = painterResource(id = randomPlaceHolder),
            // placeholder： 在加载图片时显示的占位图。
             placeholder = painterResource(id = randomPlaceHolder),
        )
    }
}